<template>
    <div class="auth-index">
        <el-container class="index-container">
            <el-header>
                <el-row type="flex" justify="space-between" align="middle">
                    <div class="left">
                        <img :src="logoUrl" alt="logoUrl" />
                        <span>成绩管理系统</span>
                    </div>

                    <div class="right">
                        <span
                            >欢迎，<strong>{{ profile.relname }}</strong>
                            {{ profile.rname }} 登录~</span
                        >
                        <el-button plain size="mini" @click="logout"
                            >退出</el-button
                        >
                    </div>
                </el-row>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu router>
                        <el-menu-item
                            :index="item.path"
                            v-for="item in menus"
                            :key="item.path"
                        >
                            <i class="el-icon-setting"></i>
                            <span slot="title">{{ item.name }}</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import logoUrl from '@/assets/logo.png';
export default {
    data() {
        return {
            logoUrl,
            profile: JSON.parse(window.sessionStorage.getItem('profile')),
            menus: JSON.parse(window.sessionStorage.getItem('menus')),
        };
    },
    mounted() {
        console.log('this.menus', this.menus);
        console.log('this.profile', this.profile);
    },
    methods: {
        logout() {
            window.sessionStorage.clear();
            this.$router.push('/login');
        },
    },
};
</script>

<style lang="less" scoped>
.index-container {
    min-height: 100vh;
}

.el-header {
    background-color: #e4e7ed;

    .el-row {
        height: 100%;

        .left {
            display: flex;
            justify-content: start;
            align-items: center;

            img {
                width: 45px;
                border-radius: 50%;
                background-color: #eee;
            }
        }

        .right {
            span {
                margin-right: 10px;
            }

            strong {
                color: #e6a23c;
            }
        }
    }
}

.el-main {
    background-color: #eee;
}
</style>
